<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>故事</title>
    <style>
            body{
              position: relative;
          }
          * {
              margin: 0px;
              padding: 0px;
            
          }
          ul{
              list-style: none;
          }
  
 
          #head1111 {
            width: 100%;
            height: 80px;
        }

        #menu1111 ul li a {
            text-decoration: none;
            color: rgb(71, 47, 52);
            
        }

        #menu1111 ul {
            width: 800px;
            position: absolute;
            right: 80px;
        }

        #menu1111 ul li {
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            margin: 20px auto;
        }
        #menu1111 ul li a:hover {
            color: rgb(248, 90, 117);
        }
        #logo1111 {
            position: absolute;
            top: 5px;
            left: 100px;
            width: 100px;
            height: 100px;
        }
        .ph1111 {
            width: 70px;
            height: 70px;
        }
            footer{
             width: 100%;
             height: 150px;
             background-color: #eee;
             margin-top: 80px;
         }
         footer ul{
             width: 600px;
             height: 50px;
             margin: 0 auto;
         }
         footer ul li{
             position: relative;
             width: 120px;
             height: 50px;
             line-height: 50px;
             float: left;
             text-align: center
         }
         #footer1 #img2{
             margin-left: 50px;
             margin-top: 10px;
             width: 30px;
             height: 30px;
              position: relative;
             bottom: 15px;
             text-align: center
         }
      
         #footer1 #span2{
             position: relative;
             top: -25px;
             margin-right: 50px;
         } 
         #footer1 p{
             width: 100%;
             height: 30px;
             text-align: center
         }
         #footer1{
             margin-top: 20px;
             width: 500px;
             height: 30px;
             margin: 0 auto;
         }
         footer p{
             margin-top: 20px;
             text-align: center; }
              .container {
                  clear: both;
            width: 1000px;
            max-height: 100vh;
            background:rgba(248, 169, 169, 0.514);
            margin: 0 auto;
        }
        .container .content {
            padding: 20px 20px 0 20px;
            display: flex;
            flex-direction: column;
            background-color:   rgba(248, 169, 169, 0.514);
            height: 800px;
            width: 100%;
        }
        .container .message {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            height: 200px;
            align-items: flex-end;

        }
        .container .enterMsg {
            width: 76%;
            height: 180px;
            font-size: 18px;
            padding: 10px 2%;
            line-height: 26px;
        }
        .container .sendMsg {
            width: 15%;
            height: 60px;
            line-height: 60px;
            display: inline-block;
            font-size: 18px;
            cursor: pointer;
            text-align: center;
            background:pink;
            border-radius: 6px;
        }
        .container .msgs {
            margin-top: 20px;
            height: calc(100vh - 270px);
            background: pink;
            overflow: auto;
            border-radius: 6px;
            padding: 10px 2%;
        }
        .container .msgs h3 {
            margin-bottom: 25px;
        }
        .container .msgList {
            max-height: calc(100vh - 380px);
            overflow: auto;
        }
        .container .singleMsg {
            border-bottom: thin solid #ccc;
            padding: 15px 0 15px 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .container .singleMsg .delete {
            color: #999;
            cursor: pointer;
        }
        .container .singleMsg .delete:hover {
            text-decoration: underline;
        }
        .container .total {
            text-align: right;
            height: 60px;
            line-height: 60px;
        }
        #nav{
            border-top: 1px solid #ccc;
            padding: 50px;
            text-align: center;
            width: 100%;
            height: 100px;
            margin: 0 auto;
        }
        #nav>h2 {
            height: 100px;
            line-height: 50PX;
            width: 500px;
            margin: 20px auto;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            text-align: center;
            font-size: 24px;
            color: #f00;
        }

        #nav>h1 {
            height: 50px;
            line-height: 50PX;
            width: 500px;
            margin: 0 auto;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            text-align: center;
            font-size: 40px
        }

        .msgs>h3{
        color: rgb(155, 71, 82);
        }
        body{
            background-image: url('images/story_back.jpg') 

        }
      </style>
  </head>
  <body>
    <div id="head1111" style="background-color: antiquewhite">

        <div id="menu1111">
            <ul>
                <li><a href="index.html" id="index">首页</a><li>
                <li><a href="menu.html" title="">在线订餐</a><li>
                <li><a href="discount.html" title="">优惠活动</a><li>
                <li><a href="News.html" title="">新闻资讯</a><li>
                <li><a href="Contact us.html" title="">联系我们</a><li>
                
            </ul>
        </div>
        <div id="logo1111">
            <img src="images/logo1.png" alt="" class="ph1111">
        </div>
    </div>
    <div id="body">
     <div id="nav"> 
                  <h1>OUR STORYS</h1>
            <h2>我们的故事</h2></div>
          <div class="container"> 
              
    <div class="content">
          
        <div class="message">
            <textarea name="msg" id="enterMsg" class="enterMsg" placeholder="请开始你的表演吧......" style="background-color:pink"></textarea>
            <span id="sendMsg" class="sendMsg">留    言</span>
        </div>
        <div class="msgs">
            <h3>留言区</h3>
            <div class="msgList" id="messageList">
                <div class="singleMsg">
                  
                </div>
            </div>
            <div class="total">总共有 <span id="votes">0</span>条留言</div>
        </div>
    </div>
</div>
</div>
<script>
    //设置页面高度，保持一屏显示
    var maxH = document.documentElement.clientHeight;
    var container = document.querySelector('.container');
    container.style.height = maxH + 'px';

    //留言
    var enterMsg = document.getElementById('enterMsg');
    var sendMsg = document.getElementById('sendMsg');
    var msgList = document.getElementById('messageList');
    var votes = 0; //统计留言条数

    sendMsg.onclick = function(e){
        var msg = enterMsg.value;
        if(msg === ''){
            alert('您还没有输入内容哦！');
            return;
        }
        new createDiv(msg, msgList);
        votes ++;
        enterMsg.value = '';
        //msg = ''; //把enterMsg的value值保存下来后，msg只是一个副本，与enterMsg没有关系
        document.getElementById('votes').innerHTML = votes;
    };

    function createDiv(obj, el){
        this.div = document.createElement('div');
        this.div.className = 'singleMsg';
        this.p1 = document.createElement('p');
        this.p1.innerHTML = obj;
        this.p2 = document.createElement('p');
        this.p2.className = 'delete';
        this.p2.innerHTML = '删除';
        this.div.appendChild(this.p1);
        this.div.appendChild(this.p2);
        el.insertBefore(this.div, el.childNodes[0]);

        var that = this;
        this.p2.onclick = function(){
            that.div.remove();
            if(votes <= 0){
                votes = 0;
            }
            votes --;
            document.getElementById('votes').innerHTML = votes;
        };
    }
</script>
      
      <footer >
              <ul>
                  <li><a href="">首页</a></li>
                  <li><a href="">优惠活动</a></li>
                  <li><a href="">在线订餐</a></li>
                  <li><a href="">新闻资讯</a></li>
                  <li><a href="">关于我们</a></li>
              </ul>
              <div id="footer1">
              <p><img id="img2" src="images/Iphone.png" alt=""><span id="span2">150xxxxxx2014</span></p>
          </div>
          <p>互联网出版许可证编号新出网证（沪）字 7777777号</p>
  </body>
  </html>
 
      
    </style>
</head>
<body>



</body>
</html>
